import React,{Component} from 'react';
import {asyncSize} from 'pofod/window.size';
import Adaptive from '../../component/adaptive/Adaptive';
import FirstScreen from '../components/first-screen/FirstScreen';
import MedicalCenter from '../components/medical-center/MedicalCenter';
import Reason from '../components/why-chose/Reason';
import IconList from '../components/icon-list/IconList';
import Footer from '../../component/footer/Footer';
import MobileFooter from '../../component/footer-mobile/FooterMobile';
import Lang from './Lang';
const iconStyle = {
    background:'rgba(8,112,146,.5)',
    width:'150px',
    padding:'10px 0',
    borderRadius:'10px'
};
const materialStyle = {
    maxWidth:'118px'
};
class BingLi extends Component{
    state = {
        noSwiping:(asyncSize().pageWidth)<1200?false:true
    };
    getNoSwiping = () => {
        if((asyncSize().pageWidth)<1200){
            this.setState({
                noSwiping:false
            })
        }else{
            this.setState({
                noSwiping:true
            })
        }
    };
    componentDidMount(){
        window.addEventListener('resize',this.getNoSwiping);
    };
    componentWillUnmount(){
        window.removeEventListener('resize',this.getNoSwiping);
    };
    render(){
        return(
            <div style={{overflow:"hidden"}}>
                <FirstScreen backgroundImg={require('./img/banner.jpg')} title={Lang.FirstScreen.title} content={Lang.FirstScreen.content}/>
                <Reason title={Lang.Reason.title} slideSource={Lang.Reason.slideSource} noSwiping={this.state.noSwiping}/>
                <IconList title={Lang.iconList.title} iconSource={Lang.iconList.iconSource} titleColor="#fff" themColor="#2381E8" iconStyle={iconStyle}/>
                <IconList title={Lang.material.title} iconSource={Lang.material.iconSource} titleColor="#2381e8" themColor="#fff" iconStyle={materialStyle} iconHeight="150px" fontColor="#666"/>
                <MedicalCenter/>
                <Adaptive desktop={<Footer/>} phone={<MobileFooter/>} size={1200}/>
            </div>
        )
    }
}
export default BingLi;
